<div class="box-container">
    <div class="search-wrap">
        <div class="radio-wrap">
            <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="selectionChanged()">
                <label nz-radio nzValue="single">单灌域分析</label>
                <label nz-radio nzValue="multi">多灌域分析</label>
            </nz-radio-group>
        </div>

        <div class="time-picker-wrap">
            自定义时间：
            <nz-range-picker
                [(ngModel)]="topDateModal"
                (ngModelChange)="rangePickerValueChange($event)"
                style="width: 300px;"
            >
            </nz-range-picker>
        </div>

        <div class="month-picker-wrap">
            <nz-select [nzAllowClear]="false"
                       nzPlaceHolder="年度"
                       [(ngModel)]="yearValue"
                       (ngModelChange)="yearPickerChange($event)"
                       style="width: 120px;margin-right: 30px;">
                <nz-option nzLabel="2020" [nzValue]="2020"></nz-option>
                <nz-option nzLabel="2019" [nzValue]="2019"></nz-option>
                <nz-option nzLabel="2018" [nzValue]="2018"></nz-option>
                <nz-option nzLabel="2017" [nzValue]="2017"></nz-option>
                <nz-option nzLabel="2016" [nzValue]="2016"></nz-option>
            </nz-select>
            <nz-radio-group [(ngModel)]="monthPickerValue" [nzButtonStyle]="'solid'"
                            (ngModelChange)="monthPickerChange($event)">
                <label nz-radio-button [nzValue]="3">4月</label>
                <label nz-radio-button [nzValue]="4">5月</label>
                <label nz-radio-button [nzValue]="5">6月</label>
                <label nz-radio-button [nzValue]="6">7月</label>
                <label nz-radio-button [nzValue]="7">8月</label>
                <label nz-radio-button [nzValue]="8">9月</label>
                <label nz-radio-button [nzValue]="9">10月</label>
                <label nz-radio-button [nzValue]="10">11月</label>
            </nz-radio-group>
        </div>

        <div class="button-wrap">
            <button nz-button nzType="primary">打印</button>
            <button nz-button nzType="primary">导出</button>
        </div>

    </div>

    <div class="main-container">
        <ng-container *ngIf="radioValue == 'single'">
            <div class="main-content">
                <div class="main-content-wrap">
                    <div class="left-panel">
                        <nz-radio-group [(ngModel)]="treeValue" [nzButtonStyle]="'solid'"
                                        (ngModelChange)="getListData()" style="width: 100%;">
                            <label nz-radio-button nzValue="23" style="width: 100%;text-align: center;">按区县</label>
                            <!--<label nz-radio-button nzValue="22" style="width: 50%;text-align: center;">按管理处</label>-->
                        </nz-radio-group>
                        <nz-tree
                            #objTreeComponent
                            [nzData]="listData"
                            [nzExpandAll]="true"
                            [nzSelectedKeys]="defaultKeys"
                            (nzClick)="selectedAreaChanged($event)">
                        </nz-tree>
                    </div>

                    <div class="right-panel">
                        <div class="right-top-box">

                            <div class="right-content">
                                <div class="card-box">
                                    <nz-card [nzTitle]="stationName + ' 用水量与灌溉进度过程线'"
                                             class="card">
                                        <div>
                                            <span>用水量统计： {{useWaterTotal}} 万m³ </span>
                                            <span style="margin-left: 10px">灌溉进度统计： {{irrProgressTotal}} 万亩 </span>
                                        </div>
                                        <div
                                            echarts
                                            [options]="processOpt"
                                            [merge]="processOptChange"
                                            style="height: 329px;"
                                        ></div>
                                    </nz-card>
                                    <nz-card [nzTitle]="stationName + '旬月特征值对比'"
                                             class="card">
                                        <div class="title">
                                            <form nz-form [nzLayout]="'inline'" [formGroup]="monthForm">
                                                <nz-form-item>
                                                    <nz-form-label>特征值</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-select formControlName="valType"
                                                                   (ngModelChange)="xunTypeChanged($event)"
                                                                   [nzAllowClear]="false"
                                                                   nzPlaceHolder="特征值">
                                                            <nz-option nzLabel="用水总量" nzValue="1"></nz-option>
                                                            <nz-option nzLabel="日最高用水量" nzValue="2"></nz-option>
                                                            <nz-option nzLabel="日最低用水量" nzValue="3"></nz-option>
                                                            <nz-option nzLabel="灌溉总面积" nzValue="4"></nz-option>
                                                            <nz-option nzLabel="日最高灌溉总面积" nzValue="5"></nz-option>
                                                            <nz-option nzLabel="日最低灌溉总面积" nzValue="6"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>作物</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-select formControlName="plantId" nzPlaceHolder="请选择"
                                                                   style="min-width: 75px">
                                                            <nz-option *ngFor="let item of cropList" [nzLabel]="item.name"
                                                                       [nzValue]="item.id"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>时间类型</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-select formControlName="dateType" [nzAllowClear]="false">
                                                            <nz-option nzLabel="月" nzValue="1"></nz-option>
                                                            <nz-option nzLabel="旬" nzValue="2"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>

                                                <nz-form-item>
                                                    <nz-form-label>历史年份</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-year-picker style="width: 75px;"
                                                                        [nzDisabledDate]="disabledStartDate"
                                                                        nzFormat="yyyy"
                                                                        formControlName="startYear"
                                                                        (ngModelChange)="onStartChange($event)"
                                                                        (nzOnOpenChange)="handleStartOpenChange($event)"></nz-year-picker>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-control>
                                                        <nz-year-picker style="width: 75px;"
                                                                        [nzDisabledDate]="disabledEndDate"
                                                                        nzFormat="yyyy"
                                                                        formControlName="endYear"
                                                                        [nzOpen]="endOpen"
                                                                        (ngModelChange)="onEndChange($event)"
                                                                        (nzOnOpenChange)="handleEndOpenChange($event)">
                                                        </nz-year-picker>

                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>当前年</nz-form-label>
                                                    <nz-form-control>
                                                        <input style="width: 58px;" formControlName="currYear" nz-input
                                                               readonly/>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-control>
                                                        <button nz-button nzType="primary" (click)="onQueryMonthList()">确定
                                                        </button>
                                                    </nz-form-control>
                                                </nz-form-item>
                                            </form>


                                        </div>
                                        <div
                                            echarts
                                            [options]="monthOpt"
                                            [merge]="monthOptChange"
                                            style="height: 291px;"
                                        ></div>
                                    </nz-card>
                                    <nz-card [nzTitle]="stationName + '历史同期对比'"
                                             class="card">
                                        <div class="title">
                                            <form nz-form [nzLayout]="'inline'" [formGroup]="historyForm">
                                                <nz-form-item>
                                                    <nz-form-label>类型</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-select formControlName="valType"
                                                                   (ngModelChange)="historyTypeChanged($event)"
                                                                   [nzAllowClear]="false"
                                                                   nzPlaceHolder="类型"
                                                                   style="min-width: 155px;">
                                                            <nz-option nzLabel="灌溉面积" nzValue="val1"></nz-option>
                                                            <nz-option nzLabel="累计灌溉面积" nzValue="valTotal1"></nz-option>
                                                            <nz-option nzLabel="用水量" nzValue="val2"></nz-option>
                                                            <nz-option nzLabel="累计用水量" nzValue="valTotal2"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>作物</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-select formControlName="plantId" nzPlaceHolder="请选择"
                                                                   style="min-width: 135px">
                                                            <nz-option *ngFor="let item of cropList" [nzLabel]="item.name"
                                                                       [nzValue]="item.id"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>历史年</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-select nzAllowClear nzPlaceHolder="历史年"
                                                                   formControlName="yearStr" nzMode="multiple"
                                                                   style="min-width: 165px">
                                                            <nz-option *ngFor="let option of historyYearList"
                                                                       [nzLabel]="option" [nzValue]="option"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>

                                                <nz-form-item>
                                                    <nz-form-label>时间</nz-form-label>
                                                    <nz-form-control>
                                                        <nz-date-picker [nzDisabledDate]="disabledHistoryStartDate"
                                                                        nzFormat="MM-dd"
                                                                        formControlName="startDateStr"
                                                                        [nzShowToday]="false"
                                                                        (ngModelChange)="onStartHistoryChange($event)"
                                                                        (nzOnOpenChange)="handleStartHistoryOpenChange($event)"
                                                                        style="width: 85px;">

                                                        </nz-date-picker>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-control>
                                                        <nz-date-picker [nzDisabledDate]="disabledHistoryEndDate"
                                                                        nzFormat="MM-dd"
                                                                        formControlName="endDateStr"
                                                                        [nzShowToday]="false"
                                                                        [nzOpen]="endHistoryOpen"
                                                                        (ngModelChange)="onEndHistoryChange($event)"
                                                                        (nzOnOpenChange)="handleEndHistoryOpenChange($event)"
                                                                        style="width: 85px;">
                                                        </nz-date-picker>

                                                    </nz-form-control>
                                                </nz-form-item>

                                                <nz-form-item>
                                                    <nz-form-control>
                                                        <button nz-button nzType="primary" (click)="onQueryHistory()">确定
                                                        </button>
                                                    </nz-form-control>
                                                </nz-form-item>
                                            </form>
                                        </div>
                                        <div
                                            echarts
                                            [options]="historyOpt"
                                            [merge]="historyOptChange"
                                            style="height: 291px;"
                                        ></div>
                                    </nz-card>
                                </div>
                                <div class="card-box">
                                    <nz-card [nzTitle]="stationName + '监测数据'"
                                             class="card">
                                        <nz-table
                                            #dataTable
                                            nzBordered
                                            [nzData]="tableData"
                                            [nzPageSize]="pageSize"
                                            nzSize="middle">
                                            <thead>
                                            <tr>
                                                <th>日期</th>
                                                <th>用水量</th>
                                                <th *ngFor="let item of tableHead">{{ item.name }}</th>
                                                <th>灌溉面积总计</th>
                                                <th>亩均用水量</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr *ngFor="let row of dataTable.data">
                                                <td>{{ row.time }}</td>
                                                <td>{{ row.useWater }}</td>
                                                <td *ngFor="let item of tableHead">{{ row[item.id] }}</td>
                                                <td>{{ row.sumArea }}</td>
                                                <td>{{ row.avgAreaUse }}</td>
                                            </tr>
                                            </tbody>
                                        </nz-table>
                                    </nz-card>

                                </div>


                                <!--<nz-card [nzTitle]="stationName + '特征及统计值'"-->
                                         <!--class="card">-->
                                    <!--<div>-->
                                        <!--特征值指标：-->
                                        <!--<nz-select (ngModelChange)="featureChanged($event)"-->
                                                   <!--[nzAllowClear]="false"-->
                                                   <!--[(ngModel)]="featureModel"-->
                                                   <!--nzPlaceHolder="特征值指标"-->
                                                   <!--style="width: 150px">-->
                                            <!--<nz-option *ngFor="let item of featureList" [nzLabel]="item.name"-->
                                                       <!--[nzValue]="item.id"></nz-option>-->
                                        <!--</nz-select>-->
                                    <!--</div>-->
                                    <!--<form nz-form [formGroup]="featureForm" class="form-content">-->
                                        <!--<div nz-row [nzGutter]="24">-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>最大值</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="最大值" formControlName="maxVal">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>最小值</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="最小值" formControlName="minVal">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>最大值出现时间</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="最大值出现时间" formControlName="maxTime">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>最小值出现时间</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="最小值出现时间" formControlName="minTime">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->

                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>平均值</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="平均值" formControlName="avgVal">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>中位值</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="中位值" formControlName="medianVal">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>前3年平均值</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="前3年平均值"-->
                                                               <!--formControlName="last3AvgVal">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                            <!--<div nz-col [nzSpan]="12">-->
                                                <!--<nz-form-item nzFlex>-->
                                                    <!--<nz-form-label>前3年中位值</nz-form-label>-->
                                                    <!--<nz-form-control>-->
                                                        <!--<input nz-input placeholder="前3年中位值"-->
                                                               <!--formControlName="last3MedianVal">-->
                                                    <!--</nz-form-control>-->
                                                <!--</nz-form-item>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</form>-->
                                <!--</nz-card>-->


                                <!--<nz-card [nzTitle]="stationName + '亩均用水量曲线'"-->
                                         <!--class="card">-->
                                    <!--<div-->
                                        <!--echarts-->
                                        <!--[options]="processOpt"-->
                                        <!--[merge]="avgAreaUseOptChange"-->
                                        <!--style="height: 329px;"-->
                                    <!--&gt;</div>-->
                                <!--</nz-card>-->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </ng-container>

        <ng-container *ngIf="radioValue == 'multi'">
            <app-agri-irr-multi [dateModal]="topDateModal"></app-agri-irr-multi>
        </ng-container>
    </div>

</div>
